<template>
	<div>
		<div class="search-view" v-if="type==1" :style="float && 'position: fixed;'">
			<i class="icon sousuo"></i>
			<input class="ser-input" confirm-type="search" @confirm="search" :placeholder="name" />
		</div>
		<div class="title-view" v-if="type==2" :style="float && 'position: fixed;'">
			<div v-if="showBack" class="icon fanhui"></div>
			<div class="title" :style="showBack && 'width:calc(100% - 80px);'">{{name}}</div>
		</div>
		<div v-if="float" :style="'padding-top:40px;'"></div>
	</div>
</template>

<script>
export default {
	props: {
		type: Number,
		float: Boolean,
		name: String
	},
	data() {
		return {
			showBack : true
		}
	},
	mounted() {

	},
	methods: {
		search(){
			
		}
	}
}
</script>

<style lang='less'>
	.title-view{
		width: 371px;
		display: flex;
		background: #fff;
		height: 40px;
		line-height: 40px;
		font-size: 13px;
		text-align: center;
		color:#333;
		border-bottom: 1px solid rgb(245,245,245);
		z-index: 99;
		.title{
			width: 100%;
			text-align: center;
		}
		.fanhui{
			width: 40px;
		}
	}
	.search-view{
		width: 371px;
		display: flex;
		align-items:center;
		height: 40px;
		background: #fff;
		z-index: 99;
		border-bottom: 1px solid rgb(245,245,245);
		.sousuo {
			font-size: 18px;
			width:20px;
			margin-left:15px;
			margin-right:-25px;
			line-height: 30px;
		}
		.ser-input{
			border:none;
			width: 220px;
			height: 30px;
			line-height: 30px;
			padding-left: 30px;
			text-align: left;
			font-size: 14px;
			color:#606266;
			border-radius: 15px;
			background: rgba(230,230,230,.6);
		}
	}
</style>